<!--
 * @Author: lihaonan
 * @Date: 2024-09-25 16:56:28
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-11-16 20:29:26
 * @Description: 请填写简介
-->
<template>
  <view class="content">
    <view class="u-nav-slot" slot="left" @click="left">
      <u-icon name="arrow-left" color="#8a8a8a" size="42" :bold="true"></u-icon>
    </view>
    <view class="content_top">
      <view class="text_title">{{ details.actName }}</view>
    </view>
    <view class="text-top">
      <view class="title_img">
        <image :src="details.cover" style="width: 100%; height: 100%"></image>
      </view>
    </view>
    <u-line></u-line>
    <view class="jiage">
      <view class="jiage_top">
        <view class="num">￥{{ details.price }}</view>
        <view>
          <!-- <u-tooltip text="详情" overlay :showCopy="false"></u-tooltip> -->
        </view>
      </view>
      <view class="jiage_bottom">
        <view class="bottom_box">2人九五折</view>
        <view class="bottom_box">3人九折</view>
      </view>
    </view>
    <u-line></u-line>
    <view class="didian">
      活动地点：<text
        style="color: #8a8a8a; font-size: 14px; font-weight: 500"
        >{{ details.actLocation }}</text
      >
    </view>
    <view class="time">
      活动时间：<text
        style="color: #8a8a8a; font-size: 14px; font-weight: 500"
        >{{ details.actTime + "~" + details.endTime }}</text
      >
    </view>
    <u-line></u-line>
    <view class="wantGo">
      <view class="text_title">活动看点</view>
      <view class="wantGo_content">
        <view class="people">
          <view>537.7人</view>
          <view class="text">想去</view>
        </view>
        <view class="wantGo_jieshao">{{ details.content }}</view>
      </view>
    </view>
    <u-line></u-line>
    <view class="logo">
      <view class="logo_img">
        <u-avatar
          :src="'../../static/img/下载.png'"
          size="100"
          customStyle="margin:0 auto"
        ></u-avatar>
      </view>
      <view class="log_text">
        {{ details.organizer }}
      </view>
    </view>
    <u-line></u-line>
    <view class="details">
      <view class="text_title">活动详情</view>
      <view class="details_text">
        {{ details.des }}
      </view>
    </view>
    <u-line></u-line>
    <view class="details">
      <view class="text_title">注意事项</view>
      <view class="details_text">
        {{ details.note }}
      </view>
    </view>
    <u-line></u-line>
    <view class="jiabin">
      <view class="text_title">特邀嘉宾</view>
      <view class="jiabinList">
        <view class="list_box" v-for="(item, index) in jiabin" :key="index">
          <u-avatar
            :src="item.url"
            shape="square"
            size="70"
            customStyle="margin:0 auto"
          ></u-avatar>
          <view class="name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <u-line></u-line>
    <view class="text-area">
      <view class="text_title">为你推荐</view>
      <view
        class="imageBox"
        v-for="(item, index) in list"
        :key="index"
        @click="imageClick(item)"
      >
        <view class="img">
          <image :src="item.cover" style="width: 100%; height: 100%"></image>
        </view>
        <view class="text_right">
          <view class="title">{{ item.actName }}</view>
          <view class="text1">{{ item.actLocation }}</view>
          <view class="text2">{{ item.actTime + "~" + item.endTime }}</view>
          <view class="text3">
            <text>己报名人数:</text>
            {{ item.signNumber }}/{{ item.numberLimit }}
          </view>
          <view class="text4">
            <text class="jiage">￥{{ item.price }}</text> 起
          </view>
        </view>
      </view>
    </view>
    <view class="tab_bottom">
      <view class="fenxiang">
        <image
          src="../../static/img/分享.png"
          style="width: 50rpx; height: 50rpx"
        ></image>
        <view @click="fenxiangClick">分享</view>
      </view>
      <view class="tab_right">
        <view class="guanzhu" @click="guanzhu">
          <image
            :src="details.collect === false ? thumbsupImg[0] : thumbsupImg[1]"
            style="width: 40rpx; height: 40rpx; position: relative; top: 11rpx"
          >
          </image>
          <text>关注</text>
        </view>
        <view class="baoming" @click="application"> 我要报名 </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getActList, addCollect, delCollect } from "@/api/swiper";
const list = ref();
const details = ref();
const jiabin = ref([
  {
    url: "../../static/img/下载.png",
    name: "于老师",
  },
  {
    url: "../../static/img/下载.png",
    name: "毕老师",
  },
]);
const thumbsupImg = [
  "../../static/icon/kongxin.png",
  "../../static/icon/shixin.png",
];
// tab切换
const tabClick = () => {};
// 获取列表数据
const queryList = async () => {
  const { data, code } = await getActList({ pageSize: "10", pageNum: "1" });
  if (code !== 200) return;
  list.value = data.records;
  list.value.map(
    (item: { cover: string; actTime: string; endTime: string }) => {
      item.cover = "https://hunlianjiaxiao.cn/img/love/" + item.cover;
      item.actTime = item.actTime.substring(5, 16);
      item.endTime = item.endTime.substring(5, 16);
    }
  );
};
// 分享
const fenxiangClick = () => {};
// 关注
const guanzhu = async () => {
  if (details.value.collect) {
    const { code } = await delCollect(details.value.actId);
    if (code !== 200) return;
    details.value.collect = false;
  } else {
    const { code } = await addCollect({
      bid: details.value.actId,
      type: "ACTIVE",
    });
    if (code !== 200) return;
    details.value.collect = true;
  }
};
// 返回上一页
const left = () => {
  uni.navigateBack();
};
// 报名
const application = () => {
  uni.navigateTo({
    url:
      `/pages/swiper/application?data=` +
      encodeURIComponent(JSON.stringify(details.value)),
  });
};
// 点击图片跳转
const imageClick = (item: {}) => {
  uni.navigateTo({
    url:
      `/pages/swiper/eventDetails?data=` +
      encodeURIComponent(JSON.stringify(item)),
  });
};
onLoad((option) => {
  if (!option) return;
  details.value = JSON.parse(decodeURIComponent(option.data));
  wx.showShareMenu({
    withShareTicket: true,
    //设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
    menus: ["shareAppMessage", "shareTimeline"],
  });
  queryList();
});
</script>
<style lang="scss">
.content {
  background-color: #fff;
}
.u-nav-slot {
  position: absolute;
  top: 115rpx;
  left: 30rpx;
  z-index: 100;
  z-index: 100;
}

.text-top {
  text-align: center;
  .title_img {
    margin: 0 auto;
    height: 400rpx;
    width: 750rpx;
    overflow: hidden;
  }
}

.text-area {
  padding: 20rpx;
  border-radius: 20rpx 20rpx 0 0;

  .imageBox {
    margin: 20rpx auto;
    height: 200rpx;
    width: 680rpx;
    overflow: hidden;
    display: flex;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 20rpx;

    .img {
      height: 200rpx;
      width: 180rpx;
    }

    .text_right {
      margin-left: 40rpx;
      position: relative;

      .title {
        font-weight: 700;
      }

      .text1 {
        font-size: 14px;
        margin-top: 10rpx;
        color: #8a8a8a;
      }

      .text2 {
        font-size: 14px;
        color: #8a8a8a;
      }

      .text3 {
        font-size: 14px;
        color: #eccda4;
      }

      .text4 {
        font-size: 14px;
        margin-top: 10rpx;
        position: absolute;
        right: -130rpx;

        .jiage {
          font-size: 16px;
          color: #fd6585;
          font-weight: 600;
        }
      }
    }
  }
}

.content_top {
  background-image: linear-gradient(to bottom, #eb97b0, #faf5f6);
  height: 140rpx;
  padding-top: 130rpx;
  line-height: 160rpx;
  text-align: center;
  .text_title {
    font-size: 18px;
    color: #fd6585;
  }
}

.text_title {
  font-weight: 700;
}

.jiage {
  padding: 20rpx;

  .jiage_top {
    display: flex;
    justify-content: space-between;

    .num {
      font-size: 18px;
      color: #fd6585;
      font-weight: 600;
    }
  }

  .jiage_bottom {
    margin-top: 20rpx;
    display: flex;

    .bottom_box {
      width: 100rpx;
      height: 30rpx;
      margin-right: 10rpx;
      border: 1px solid #fd6585;
      color: #fd6585;
      font-size: 10px;
      text-align: center;
      line-height: 30rpx;
    }
  }
}

.didian {
  padding: 20rpx;
  font-weight: 700;
}

.time {
  padding: 20rpx;
  font-weight: 700;
}

.wantGo {
  padding: 20rpx;

  .wantGo_content {
    display: flex;

    .people {
      font-weight: 700;
      font-size: 20px;
      color: orange;
      margin-top: 10rpx;
      margin-left: 60rpx;

      .text {
        font-size: 16px;
        text-align: center;
      }
    }

    .wantGo_jieshao {
      margin-left: 50rpx;
      color: #8a8a8a;
      font-size: 14px;
    }
  }
}

.logo {
  display: flex;
  padding: 20rpx;
  height: 100rpx;
  line-height: 100rpx;

  .logo_img {
    margin-left: 50prx;
  }

  .log_text {
    font-weight: 700;
    font-size: 18px;
    margin-left: 30rpx;
  }
}

.details {
  padding: 20rpx;

  .details_text {
    margin-top: 10rpx;
    color: #8a8a8a;
    font-size: 14px;
  }
}

.jiabin {
  padding: 20rpx;

  .jiabinList {
    display: flex;

    .list_box {
      margin: 10rpx 10rpx;

      .name {
        font-size: 14px;
      }
    }
  }
}

.tab_bottom {
  position: fixed;
  bottom: 0;
  height: 100rpx;
  width: 100%;
  background: #fff;
  display: flex;
  padding: 0 30rpx;
  padding-bottom: env(safe-area-inset-bottom);

  .fenxiang {
    width: 100rpx;
    font-size: 12px;
    text-align: center;
    margin-top: 10rpx;
  }

  .tab_right {
    display: flex;
    width: 600rpx;
    height: 70rpx;
    line-height: 70rpx;
    margin-top: 15rpx;

    .guanzhu {
      width: 300rpx;
      text-align: center;
      border: 1px solid #fd6585;
      border-radius: 50rpx 0 0 50rpx;
    }

    .baoming {
      width: 300rpx;
      text-align: center;
      background: #fd6585;
      color: #fff;
      border-radius: 0 50rpx 50rpx 0;
    }
  }
}
</style>
